<template>
  <el-form  ref="ruleFormRef" :model="formInline" :rules="formRules" label-width="auto" label-position="top" v-loading="isLoading">
    <el-row :gutter="30">
		<re-col :value='24' :xs='24' :sm='24'>
				<el-form-item :label='titles?.unityId' prop='unityId'>
					<unitParentSelect v-model='formInline.unityId' clearable :placeholder='prompt?.unityId'
						:style="{ width: '100%' }" @blur="formValidateField(ruleFormRef, 'unityId')"/>
					<!-- <el-input v-model.trim='formInline.unityId' clearable :placeholder='prompt?.unityId' /> -->
				</el-form-item>
			</re-col>
			<re-col :value='12' :xs='24' :sm='24'>
				<el-form-item :label='titles?.loginName' prop='loginName'>
					<el-input :disabled="eaitsing !== false" v-model.trim='formInline.loginName' clearable :placeholder='prompt?.loginName'
					:formatter="(value) => value.replace(ACCOUNT_REG.inputFormat, '')"
						:parser="(value) => value.replace(ACCOUNT_REG.inputFormat, '')" />
				</el-form-item>
			</re-col>
			<re-col :value='12' :xs='24' :sm='24'>
				<el-form-item :label='titles?.nickname' prop='nickname'>
					<el-input :maxlength="30" :show-word-limit="true" v-model.trim='formInline.nickname' clearable :placeholder='prompt?.nickname' />
				</el-form-item>
			</re-col>
			<re-col :value='12' :xs='24' :sm='24'>
				<el-form-item :label='titles?.status' prop='status'>
					<!-- <el-input v-model.trim='formInline.status' clearable :placeholder='prompt?.status' /> -->
					<el-radio-group v-model="formInline.status">
							<el-radio v-for="item in USERSTATUS" :key="item.value" :value="item.value">
								{{ isNullOrEmpty( item.label ) }}
								
							</el-radio>
						</el-radio-group>
				</el-form-item>
			</re-col>
			<re-col :value='12' :xs='24' :sm='24'>
				<el-form-item :label='titles?.phone' prop='phone'>
					<el-input v-model.trim='formInline.phone' clearable :placeholder='prompt?.phone' />
				</el-form-item>
			</re-col>
		
		
		
			<re-col :value='12' :xs='24' :sm='24'>
				<el-form-item :label='titles?.password' prop='password'>
					<el-input  type="password" show-password v-model.trim='formInline.password' clearable :placeholder='prompt?.password' />
				</el-form-item>
			</re-col>
			<re-col :value='12' :xs='24' :sm='24'>
				<el-form-item  :label='titles?.confirmPassword' prop='confirmPassword'>
					<el-input type="password"  show-password v-model.trim='formInline.confirmPassword' clearable :placeholder='prompt?.confirmPassword' />
				</el-form-item>
			</re-col>
		
			<re-col :value='24' :xs='24' :sm='24'>
				<el-form-item :label='titles?.remark' prop='remark'>
					<el-input :maxlength="100" :show-word-limit="true" type="textarea" autosize v-model='formInline.remark' clearable :placeholder='prompt?.remark' />
				</el-form-item>
			</re-col>
			    </el-row>
  </el-form>
</template>

<script setup lang="ts">
import { isNullOrEmpty } from '@/utils/functions'
import md5 from "blueimp-md5";
import { PHONE_REG, PASSWORD_REG, PLATFORM_LIST_SELECT, ACCOUNT_REG ,} from '@/constant/index'
import unitParentSelect from '@/components/select/unitParentSelect/unitParentSelectTree.vue' 

import { ref,reactive } from "vue";
import ReCol from "@/components/ReCol";
import type { FormRules } from "element-plus";
import { titles,prompt } from './index';
import type { infoType } from '@/api/manage/Individual-management/Individual-users/index';
import{USERSTATUS} from '@/constant/individual'
import { isEmpty } from "@pureadmin/utils";
import { formValidateField } from '@/utils/functions'
type FormProps = {
	formInline: infoType,
	isLoading: boolean,
	eaitsing: boolean
}    

const props = withDefaults(defineProps<FormProps>(), {
	formInline: () => ({} as infoType),
	isLoading: false,
	eaitsing:false
});

const formRules = reactive(<FormRules>{id: [{ required: true, message: prompt?.id, trigger: 'blur' },],
nickname: [{ required: true, message: prompt?.nickname, trigger: 'blur' },],
loginName: [{ required: true, message: prompt?.loginName, trigger: 'blur' },
{ pattern: ACCOUNT_REG.role, message: ACCOUNT_REG.text, trigger: 'blur' }
],
password: [
		{ required: true, message: prompt?.password, trigger: 'blur' },
		{ pattern: PASSWORD_REG.role, message: PASSWORD_REG.text, trigger: 'blur' }
	],
	confirmPassword: [
		{ required: true, message: prompt?.confirmPassword, trigger: 'blur' },
		{ pattern: PASSWORD_REG.role, message: PASSWORD_REG.text, trigger: 'blur' },
		{
			validator: (rule, value, callback) => {
				if (value !== props.formInline.password) {
					callback(new Error('两次密码输入不一致'));
				} else {
					callback();
				}
			}
		}
	],
phone: [{ required: true, message: prompt?.phone, trigger: 'blur' },{ pattern: PHONE_REG.role, message: PHONE_REG.text, trigger: 'blur' }],
lastLoginTime: [{ required: true, message: prompt?.lastLoginTime, trigger: 'blur' },],
lastLoginIp: [{ required: true, message: prompt?.lastLoginIp, trigger: 'blur' },],
unityId: [{ required: true, message: prompt?.unityId, trigger: 'blur' },],
unityName: [{ required: true, message: prompt?.unityName, trigger: 'blur' },],
status: [{ required: true, message: prompt?.status, trigger: 'blur' },],
});
const ruleFormRef = ref();
function setFormRules() {
	formRules.password = [
		{ required: false, message: prompt?.password, trigger: 'blur' },
		{ pattern: PASSWORD_REG.role, message: PASSWORD_REG.text, trigger: 'blur' }
	]
	formRules.confirmPassword = [
		{ required: false, message: prompt?.confirmPassword, trigger: 'blur' },
		{ pattern: PASSWORD_REG.role, message: PASSWORD_REG.text, trigger: 'blur' },
		{
			validator: (rule, value, callback) => {
				if (value !== props.formInline.password && !isEmpty(value) && !isEmpty(props.formInline.password)) {
					callback(new Error('两次密码输入不一致'));
				} else {
					callback();
				}
			}
		}
	]
}
function getRef() {
  return ruleFormRef.value;
}

defineExpose({ getRef, setFormRules });
</script>
